$inactive-button: #aaa;
$inactive-bg: #ddd;
$active-button: $am-theme-primary;
$active-bg: rgba($active-button, .6);

$box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);

.toggle-bool-switches-container {
  text-align: center;

  .toggle-bool-switch {
    cursor: pointer;

    background: $inactive-bg;
    background-image: none;
    box-shadow: $box-shadow;

    width: 36px;
    height: 14px;
    display: inline-block;
    position: relative;
    border-radius: 9px;

    &::before {
      content: '';
      background: $inactive-button;
      background-image: none;
      box-shadow: none;

      display: inline-block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      position: absolute;
      left: -3px;
      top: -3px;

      transition: all .25s linear;
      transform: translateX(0);
    }

    &.on {
      background: $active-bg;
      background-image: none;

      &::before {
        left: calc(100% - 15px);
        background: $active-button;
      }
    }
  }
}
